<template>
  <div id="box">
    <div id="boxTop">个人资料</div>
    <div id="content">
      <Head> </Head>
      <div id="rightBox">
        <div>
          <span>邮箱</span>
          <span>{{ email }}</span>
        </div>
        <div>
          性别
          <input type="radio" name="sex" value="女" v-model="radioValue"/>女
          <input type="radio" name="sex" value="男" v-model="radioValue"/>男
        </div>
        <div>
          生日
          <input type="date" v-model="birthday"/>
        </div>
        <div id="likeBox">
          偏爱
          <div class="like">
            <input type="checkbox" value="拿破仑" name="like" v-model="likes"/><span>拿破仑</span>
            <input type="checkbox" value="鲜奶" name="like" v-model="likes"/><span>鲜奶</span>
            <input type="checkbox" value="慕斯" name="like" v-model="likes"/><span>慕斯</span>
            <input type="checkbox" value="芝士" name="like" v-model="likes"/><span>芝士</span>
          </div>
          <div class="like">
            <input type="checkbox" value="巧克力" name="like" v-model="likes"/><span>巧克力</span>
            <input type="checkbox" value="咖啡" name="like" v-model="likes"/><span>咖啡</span>
            <input type="checkbox" value="坚果" name="like" v-model="likes"/><span>坚果</span>
            <input type="checkbox" value="水果" name="like" v-model="likes"/><span>水果</span>
          </div>
        </div>
      </div>
    </div>
    <button class="keep" @click="keep">保存</button>
    <span class="tips" v-if="sign">保存成功</span>
  </div>
</template>
<script>
import Head from "./components/personal/head.vue";
export default {
  data() {
    return {
      email: "",
      radioValue:"",
      likes:[],
      birthday:"",
      sign:false
    };
  },
  components: {
    Head,
  },
methods:{
    async keep(){
        this.axios("/lqc/keepUserinfo",{params:{
            birthday:this.birthday,
            sex:this.radioValue
        }})
        this.sign = true
        setTimeout(()=>{
          this.sign = false
        },1000)
        // console.log(this.radioValue) 获取性别
        // console.log(this.likes) 获取爱好
        // console.log(this.birthday) 获取生日
    }
 },
  async mounted() {
    this.email = window.localStorage.getItem("email");
    let req = await this.axios("/lqc/getUserinfo");
    this.$store.commit("initUserimg",this.$store.state.url + req.data[0].user_img)
    // console.log(req.data[0])
    this.radioValue = req.data[0].sex
    this.birthday = req.data[0].user_birthday   
  },
};
</script>
<style scoped lang="scss">
#box {
  margin: 0 160px;
  padding-top: 120px;
  height: 1000px;
}
#boxTop {
  width: 100%;
  height: 100px;
  margin-top: 50px;
  background-color: rgb(243, 243, 243);
  font-size: 24px;
  line-height: 100px;
  text-align: center;
  color: rgb(146, 146, 152);
}
#content {
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  div {
    padding-top: 10px;
    flex: 1;
    // background-color: pink;
    text-align: center;
  }
}
#rightBox {
  border-left: 1px solid rgb(238, 238, 238);
  div {
    margin-bottom: 50px;
  }
  span {
    margin-left: 10px;
  }
  input {
    margin-left: 10px;
  }
}

.like {
  margin-top: 10px;
  margin-bottom: 15px !important;
}
.keep {
  width: 150px;
  height: 50px;
  background-color: rgb(255, 226, 0);
  border: none;
  border-radius: 20px;
  font-size: 16px;
  margin: 0 auto;
  display: block;
  margin-top: 100px;
}
.tips{
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100px;
  height: 30px;
  margin: auto;
  text-align: center;
  line-height: 30px;
  background-color: rgb(108, 108, 108);
}
</style>